import { Component, OnInit, Input, ViewChild, ElementRef, Renderer } from '@angular/core';
import { Term } from "../limited-farm-category";
import { Router } from '@angular/router';

@Component({
  selector: 'app-overview-panel',
  templateUrl: './overview-panel.component.html',
  styleUrls: ['./overview-panel.component.css'],
})

export class OverviewPanelComponent implements OnInit {
  @ViewChild('round')
  private round: ElementRef;
  @ViewChild('img')
  private img: ElementRef;
  @Input()
  ratio = 1;
  powerShow: number = -1;

  /**
   * 图片
   * 
   * @type {string}
   * @memberof OverviewPanelComponent
   */
  @Input()
  //picture: string;
  backgroundImg: string;

  /**
   * 背景色 
   * 
   * @type {string}
   * @memberof OverviewPanelComponent
   */
  @Input()
  background: string;

  /**
   * 标题
   * 
   * @type {string}
   * @memberof OverviewPanelComponent
   */
  @Input()
  title: string;

  /**
   * 项
   * 
   * @type {Array<PlanPowerPanel>}
   * @memberof OverviewPanelComponent
   */
  @Input()
  terms: Array<Term>;
  @Input()
  color: string;
  private curWwwPath: string;
  private pathName: string;
  private pos: number;
  localhostPath: string;
  constructor(
    private renderer: Renderer,
    private router:Router
  ) { }

  ngOnInit() {
    // this.terms = [
    //   new PlanPowerPanel("总装机容量",1370.5,"MW"),
    //   new PlanPowerPanel("风场个数",9,"个"),
    //   new PlanPowerPanel("风机数",900,"台"),
    //   new PlanPowerPanel("总有功功率",800,"MW"),
    //   new PlanPowerPanel("平均风速",6.12,"MW"),
    //   new PlanPowerPanel("总日发电量",6.12,"万kWh")
    // ];
    this.curWwwPath = window.location.href;
    this.pathName = window.location.pathname;
    this.pos = this.curWwwPath.indexOf(this.pathName);
    this.localhostPath = this.curWwwPath.substring(0, this.pos);
    if (this.localhostPath.indexOf("localhost:4200") < 0) {
      if (this.localhostPath.indexOf("file:") < 0) {
        this.localhostPath = '.';
      } else {
        this.localhostPath = this.localhostPath + '/dist';
      };

    }
    this.onResize();

  }
  /* public ngAfterViewChecked() {
    this.onResize();
  } */
  enterPower(i: number) {
    this.powerShow = i;
  }
  leavePower() {
    this.powerShow = -1;
  }
  onResize() {
    let width = this.round.nativeElement.offsetWidth;
    this.renderer.setElementStyle(this.round.nativeElement, "height", width + "px");
    //this.renderer.setElementStyle(this.round.nativeElement, "margin", `${marginLeft}px 0 0 ${marginLeft}px`)
  }
  ondblclick(ev) {
    this.router.navigate(['/monitor/keytarget']);

  }
}



// WEBPACK FOOTER //
// ./src/app/module/monitor/main/overview-panel/overview-panel.component.ts